<template>
	<div class="search-main">
		<el-scrollbar max-height="80vh">
			<el-tabs v-model="activeName" class="demo-tabs">
				<el-tab-pane label="信息检索" name="base">
					<AplidForm v-bind="baseSearchConfig" v-model="formModel" @change="onChange"></AplidForm>
				</el-tab-pane>
				<el-tab-pane label="" name="gather">
					<template v-slot:label>
						<el-tooltip class="box-item" effect="dark" content="根据未采集的数据字段检索" placement="top">
							<span>信息采集查漏补缺</span>
						</el-tooltip>
					</template>
					<AplidForm v-bind="otherSearchConfig" @change="onChange" v-model="formOtherModel"></AplidForm>
				</el-tab-pane>
			</el-tabs>
		</el-scrollbar>

		<div class="footer-btn w-100 f-between">
			<el-popover placement="top" :width="400" trigger="hover">
				<template #reference>
					<span>已选择 【{{ totalNum }}】个查询条件</span>
				</template>
				<el-descriptions direction="vertical" :column="1" border :title="`${totalNum}个查询条件`">
					<template #extra>
						<el-button text type="primary" @click="handleClear"> [清空查询条件] </el-button>
					</template>
					<el-descriptions-item v-for="item in selectCol" :key="item.prop" :label="item.label">
						{{ item.value }}
					</el-descriptions-item>
				</el-descriptions>
			</el-popover>
			<el-button type="primary" @click="handleSearch">查询</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { baseSearchConfig, otherSearchConfig } from './config'
import { useCommonStore } from '@/stores/common'

const { moreSearchInfo } = storeToRefs(useCommonStore())
const { setMoreSearch } = useCommonStore()
const emit = defineEmits(['refresh'])
const activeName = ref('base')
const formModel: any = ref(moreSearchInfo.value.model || {})
const formOtherModel: any = ref(moreSearchInfo.value.otherModel || {})
const totalNum = computed({
	get: () => {
		return getTotal().totalNum
	},
	set: (val) => {},
})
const selectCol = computed({
	get: () => {
		return getTotal().column
	},
	set: (val) => {},
})

const handleClear = () => {
	formModel.value = {}
	formOtherModel.value = {}
}
const getTotal = () => {
	let totalNum = 0
	let selectColumn = []
	if (activeName.value == 'base') {
		baseSearchConfig.column.map((col) => {
			const item = formModel.value[col.propName || col.prop]
			if (item instanceof Object) {
				if (Object.keys(item).length > 0) {
					totalNum += 1
					selectColumn.push({
						label: col.label,
						value: item,
					})
				}
			} else if (Array.isArray(item) && item.length > 0) {
				totalNum += 1
				selectColumn.push({
					label: col.label,
					value: item,
				})
			} else if (item) {
				totalNum += 1
				selectColumn.push({
					label: col.label,
					value: item,
				})
			}
		})
	} else {
		const num = [...(formOtherModel.value.base || []), ...(formOtherModel.value.extend || [])]
		otherSearchConfig.column.map((col) => {
			const name = col.dicData
				.map((item: any) => {
					if (num.includes(item.value)) {
						return item.label
					}
				})
				.filter(Boolean)
				.join(',')
			if (name) {
				selectColumn.push({
					label: col.label,
					value: name,
				})
			}
		})
		totalNum = num.length
	}
	return {
		totalNum,
		column: selectColumn,
	}
}

const onChange = () => {}
const handleSearch = () => {
	const crAreaId = formModel.value?.crAreas?.map((item) => item[2])
	let tempTabType1 = {}
	const tabData = [...(formOtherModel.value.base || []), ...(formOtherModel.value.extend || [])]
	tabData.map((item) => {
		tempTabType1[item] = '1'
	})
	let params = {}
	if (activeName.value == 'base') {
		params = {
			...formModel.value,
			crAreaId,
			cr_areas: undefined,
			crAreas: undefined,
			tabType: 0,
		}
	} else {
		params = {
			...tempTabType1,
			tabType: 1,
		}
	}
	setMoreSearch({
		type: 'oldman',
		params,
		model: formModel.value,
		otherModel: formOtherModel.value,
	})
	emit('refresh', params)
}
</script>

<style scoped lang="scss">
.search-main {
	width: 100%;
	height: 100%;
	position: relative;
	.footer-btn {
		position: absolute;
		bottom: 0;
		background: #fff;
	}
}
</style>
